<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import OnlySuggest from "../components/OnlySuggest.vue"
import PhoneRegister from "../components/PhoneRegister.vue";
const activeName = ref('apply')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<template>
    <main>
        <!-- TODO:有类似bootstrap一样的基本样式么？ -->
        <h5>我能帮忙</h5>
        <!-- <el-h2>我能帮忙</el-h2> -->
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="申请加入" name="apply">
                <PhoneRegister />
            </el-tab-pane>
            
            <el-tab-pane label="关注+意见建议" name="suggest">
                <OnlySuggest />
            </el-tab-pane>
        </el-tabs>
    </main>
</template>
  